import React,{useState,useEffect} from 'react'
import './Feed.scss'
import Tweetbox from './src/Tweetbox'
import Post from './src/Post'
import { supabase } from "../../utils/connection";
function Feed() {
  const [posts,setposts] = useState([])
  useEffect(()=>{
    (async ()=>{
        const { data } = await supabase.from('posts').select()
        const reversedata = data.reverse()
        setposts([...posts,...reversedata])
    })()
  },[])
  // const mySubscription = supabase
  // .from('posts')
  // .on('*', (payload) => {
  //   console.log('Change received!', payload)
  // })
  // .subscribe()     实时连接数据库报错，WebSocket connection to failed，只能手动刷新
  return (
    <div className='Feed'>
      <div className='Feed_header'>
        <h2>主页</h2>
      </div>
      <Tweetbox></Tweetbox>
      {posts.map(post=>{
        return (<div key={post.id}>
                  <Post 
                  displayname={post.displayname}
                  username={post.username}
                  verified={post.verified}
                  text={post.text}
                  image={post.image}
                  avatar={post.avatar}
                  />
                </div>)
      })}

    </div>
  )
}

export default Feed